<template>
  <el-container>
    <el-header>
      <el-row type="flex" align="middle">
        <el-col :span="12">
          <h2>纠违数据查询</h2>
        </el-col>
        <el-col :span="12" :style="{textAlign:'right'}">
          <el-switch v-model="showLite" active-text="简略信息"></el-switch>
          <el-popover placement="bottom" width="400" v-model="showExport" :disabled="!sourceValid">
            <el-button
              slot="reference"
              circle
              plain
              :type="sourceValid?'success':'info'"
              :style="{marginLeft:'20px'}"
              icon="el-icon-download"
            ></el-button>
            <export v-if="showExport" :res="source" @close="showExport=false" />
          </el-popover>
          <filter-panel source-type="rectify"/>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="page-main">
      <table-view
        v-if="sourceValid"
        :lite="showLite"
        :tableData="source"
        @rowSelected="rowSelected"
      />
      <detail-view
        v-if="rowSource!=null"
        :source="rowSource"
        :show="rowSource!=null"
        @close="rowSource=null"
      />
    </el-main>
  </el-container>
</template>

<script>
import Export from "./ExportPanel";
import FilterPanel from "@/components/FilterPanel";
// import FilterPanel from "./FilterPanel";
import TableView from "./TableView";
import DetailView from "./DetailView";
export default {
  data() {
    return {
      // source: null,
      showExport: false,
      showLite: true,
      showFilter: false,
      rowSource: null,
    };
  },
  watch: {
    showLite() {
      // solve table size problem
      let tmp = JSON.parse(JSON.stringify(this.source));
      this.$store.commit("query/SAVE_RECFITY", []);
      this.$nextTick(() => {
        this.$store.commit("query/SAVE_RECFITY", tmp);
      });
    },
  },
  computed: {
    source() {
      return this.$store.state.query.sourceRectify;
    },
    sourceValid() {
      if (this.source && this.source.length > 0) {
        return true;
      }
      return false;
    },
  },
  components: {
    FilterPanel,
    TableView,
    DetailView,
    Export,
  },
  methods: {
    openFilter() {
      this.showFilter = true;
      // console.log("openFilter");
    },
    doQuery(filter) {
      // console.log(filter);
      let path = "api/query_rectify_record/";
      let params = {
        user: {
          userstring: this.$store.state.login.userbase.number,
          userpasswd: this.$store.state.login.userbase.passwd,
        },
        filter: filter,
      };
      console.log(params);
      this.axios
        .post(path, params)
        .then((response) => {
          // console.log(response.data);
          if (response.data && response.data.length > 0) {
            // new setter with store
            this.$store.commit("query/SAVE_RECTIFY", response.data);
            // this.source = response.data;
            this.$notify.success({
              title: "查询完成",
              message: "找到了" + this.source.length + "条符合条件的记录",
            });
          } else {
            this.$notify.warning({
              title: "未找到数据",
              message: "没有找到满足全部条件的记录，请修改查询条件后重试",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
      this.showFilter = false;
    },
    rowSelected(row) {
      if (row != null) {
        this.rowSource = row;
      }
    },
  },
  mounted() {
    if (!this.source || this.source.length == 0) {
      this.showFilter = true;
    }
  },
};
</script>

<style scoped>
.page-main {
  padding: 0;
  display: flex;
  justify-content: center;
  justify-items: center;
  text-align: center;
  align-content: center;
  align-items: center;
}
</style>